<template>
  <div class="max-w-3xl mx-auto">
    <h1 class="text-3xl font-bold text-white mb-10 text-center">标签云</h1>
    
    <div class="bg-dark-light rounded-xl p-8 border border-gray-custom">
      <div class="flex flex-wrap gap-3 justify-center">
        <template v-for="tag in tags" :key="tag.name">
          <router-link to="#" class="group">
            <span class="inline-flex items-center px-4 py-2 bg-gray-custom/30 hover:bg-primary/80 text-gray-300 hover:text-white rounded-full transition-colors" :style="{ fontSize: (14 + (tag.count / maxTagCount) * 10) + 'px' }">
              {{ tag.name }}
              <span class="ml-2 bg-black/20 text-xs rounded-full px-2 py-0.5 group-hover:bg-white/20 transition-colors">
                {{ tag.count }}
              </span>
            </span>
          </router-link>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import tags from '../data/tags'

export default {
  data() {
    return {
      tags: tags,
      maxTagCount: 0
    }
  },
  mounted() {
    // 计算最大标签数量用于动态调整字体大小
    this.maxTagCount = Math.max(...this.tags.map(tag => tag.count));
  }
}
</script>

<style scoped>
/* 标签页特定样式 */
</style>
    